<template>
    <view :class="[ns.b(), ns.is(props.status)]" @click="onclick">
        <template v-if="status === 'remove'">
            <view class="remove status-button">
                <image src="/static/images/icon/application_reduce-one.svg" />
            </view>
        </template>
        <template v-else-if="status === 'add'">
            <view class="remove status-button">
                <image src="/static/images/icon/application_add-one.svg" />
            </view>
        </template>
        <view class="icon" :style="iconStyle">
            <image class="icon-image" :src="icon" />
        </view>
        <view class="label">{{ title }}</view>
    </view>
</template>

<script setup lang="ts">
import { useNamespace } from "@/hooks";

const ns = useNamespace("application");

const emits = defineEmits(["click"]);

/**
 * 定义组件的属性
 * @param {Object} props - 组件接收的属性对象
 * @param {Number|String} props.span - 列占据的栅格数，默认值为0
 * @param {Number|String} props.offset - 列偏移的栅格数，默认值为0
 */
const props = defineProps({
    status: {
        type: String,
        default: "",
        validator(value: string) {
            return ["", "remove", "add"].includes(value);
        }
    },
    icon: {
        type: String,
        default: ""
    },
    title: {
        type: String,
        default: "应用名称"
    }
});

const iconStyle = computed(() => {
    return {
        animationDelay: `${(Math.random() * 0.6).toFixed(2)}s`
    };
});

const onclick = (e: any) => {
    emits("click", e);
    uni.vibrateShort();
};
</script>

<style scoped lang="scss">
@import "./index";
</style>
